<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="../../resources/css/common/bootstrap3.min.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/css/common/datetimepicker.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/common/page.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../resources/css/common/component.css" />
</head>
<!--<link rel="import" href="/html/common/common_list.html" >-->
<div class="container body-content">
    <div id="demo">
        <div class="form-inline" style="margin:2% 0">
            <div class="form-group">
                <a class="btn btn-primary btn-sm"  href="/register.html">添加</a>
            </div>
        </div>


        <div class="form-group">
            <table class="table table-bordered table-responsive table-striped">
                <thead>
                <tr>
                    <th v-for="(value, key) in gridColumns">
                            {{ key | capitalize }}
                    </th>
                    <th>操作</th>
                </tr>
                </thead>
                <tr v-for="entry in gridData">
                    <td v-for="(value, key) in gridColumns">
                        <div v-html="showHtml(entry[key],value)"></div>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" @click="add_role_dialg(entry['id'],entry['nick_name'])">
                            角色设置
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" @click="to_update(entry['id'])">
                           修改信息
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" @click="reset_pwd(entry['id'])">
                            重置密码
                        </button>
                        <button type="button" class="btn btn-danger btn-sm" @click="delOperator(entry['id'])">
                            删除
                        </button>

                    </td>
                </tr>
            </table>
        </div>



        <div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="operatorId"/>
                            <form>
                                <table align="center" width="300" height="200" border=0>
                                    <tr>
                                        <td>
                                            <label>真实姓名:</label>
                                        </td>
                                        <td>
                                            <input name="realName" id="realName"  type="text" placeholder="真实姓名">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>昵称:</label>
                                        </td>
                                        <td>
                                            <input name="nickName" id="nickName"  type="text" placeholder="昵称">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>描述信息:</label>
                                        </td>
                                        <td>
                                            <input name="description" id="description"  type="text" placeholder="用户描述">
                                        </td>
                                    </tr>
                                </table>
                            </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button"  class="btn btn-default" onclick="updateAdmin()">提交</button>
                    </div>
                </div>
            </div>
        </div>


        <div  class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="permissionModalLabel">角色设置<input v-model="permission_operator_name" type="text" placeholder="用户名称" style="border:0;" readonly="readonly" ></h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="permissionOperatorId"/>
                        <form>
                            <table align="center" width="500" height="200" border=0>

                                <tr>
                                    <td>
                                        <label>权限:</label>
                                    </td>
                                    <td>
                                        <table>
                                    <tr v-for="entry in allRole">
                                        <td>
                                        <input  v-bind:checked="entry.check" type="checkbox"  @click="checkout(entry)" >
                                        <input  v-bind:value="entry['roleName']" style="border:0;" readonly="readonly"  >
                                        <br/>
                                        </td>
                                    </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button"  class="btn btn-default" onclick="saveRoles()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr />
    <footer>
    </footer>
</div>



<div id="app">
    <page></page>
</div>


</body>
<script type="text/javascript" src="../../resources/js/common/jquery-2.1.1.min.js"></script>
<script src="../../resources/js/common/bootstrap3.min.js" type="text/javascript"></script>
<script src="../../resources/js/common/bootstrap-datetimepicker.min.js"></script>
<script src="../../resources/js/common/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../../resources/js/common/vue.min.js"></script>
<script src="../../resources/js/common/load_list.js"></script>
<script src="../../resources/js/common/common.js"></script>
<script>
    //默认数据
    var runUrl='/operator/list';
    var param= {};
    var data={permissionOperatorId:0,
        permission_operator_name:"",
        allRole:[]};
    //列表th信息
    //列表th信息
    data['th']={'id':'管理员ID', 'real_name':'真实姓名','nick_name':'账号','description':'描述'};
    //列表字段信息以及类型  类型 video vioce img a no 五种
    data['gridColumns'] = {'id':'no', 'real_name':'no','nick_name':'no','description':'no'};
</script>

<script>

    function delOperator(id){
        jQuery.get("/operator/delete", {id: id}, function (data) {
            if(data.retCode == 1){
                alert("操作成功！！！");
                window.location.href="/html/operator/operator.html";
            }else{
                alert("操作失败，请重试！！！");
            }
        });
    }
    function to_update(id){

        jQuery.get("/operator/querById", {id: id}, function (data) {
            if(data.retCode == 1){
                $('#operatorId').val(id);
                $('#realName').val(data.realName);
                $('#nickName').val(data.nickName);
                $('#description').val(data.description);
                $('#myModal').modal({
                    keyboard: true
                });
            }else{
                alert("操作失败，请重试！！！");
            }
        });

    }
    function updateAdmin()
    {
        var realName = $('#realName').val();
        var nickName = $('#nickName').val();
        var operatorId=$('#operatorId').val();
        var description = $('#description').val();
        if(realName=="")
        {
            alert("真实姓名不能为空");
            return ;
        }
        if(nickName=="")
        {
            alert("昵称不能为空");
            return ;
        }

        jQuery.ajax({
            url: '/operator/update',
            type: "post",
            data: {id:operatorId,realName:realName,nickName:nickName,description:description},
            async: false,
            dataType: "json",
            success: function (data) {
                if(data.retCode==1) {
                    alert("修改成功");
                    window.location.href="/html/operator/operator.html";
                }
                else
                {
                    var errorMsg=data.retMsg;
                    alert("修改失败:"+errorMsg);
                    return ;
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown, XMLHttpResponse) {
                alert('程序有误')
            }
        });
        return ;
    }
    function reset_pwd(id)
    {
        jQuery.ajax({
            url: '/operator/reset_pwd',
            type: "post",
            data: {id:id},
            async: false,
            dataType: "json",
            success: function (data) {
                if(data.retCode==1) {
                    alert("重置成功");
                }
                else
                {
                    var errorMsg=data.retMsg;
                    alert("重置失败:"+errorMsg);
                    return ;
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown, XMLHttpResponse) {
                alert('程序有误')
            }
        });
    }


    function add_role_dialg( operatorId,permissionOperatorNanme){

        demo.permissionOperatorId=operatorId;
        demo.permission_operator_name=permissionOperatorNanme;
        var allRole=queryAllPermissionIds();
        var operatorRole=queryPermissionByRoleId(operatorId);
        for (var k = 0, allRoleLength = allRole.length; k < allRoleLength; k++) {
            allRole[k]['check']=false;
            for(var j = 0, operatorRoleLength = operatorRole.length; j < operatorRoleLength; j++) {
                if(allRole[k]['id']==operatorRole[j]['id']) {
                    allRole[k]['check'] = true;
                }
            }
        }
        demo.allRole=allRole;

        $('#permissionModal').modal({
            keyboard: true
        });
    }


    function saveRoles()
    {
        var param={};
        var roleList=new Array();

        for (var k = 0, length = demo.allRole.length; k < length; k++) {
            if (demo.allRole[k]['check']) {
                roleList.push(demo.allRole[k]['id']);
            }
        }

        param['id']=demo.permissionOperatorId;
        param['roleIds']=roleList.join(",");

        var  data=executeAjaxByPost("/operator/update_roles_by_operatorId",param);

        if(data.retCode==1)
        {
            alert('操作成功')
            window.location.href="/html/operator/operator.html";
        }
        else
        {
            alert('操作失败')
            return;
        }


    }
    function queryPermissionByRoleId(operatorId) {
        var param={};

        param['id']=operatorId;
        var  data=executeAjaxByPost("/operator/query_roles_by_operatorId",param);

        if(data.retCode==1)
        {
            return data.list;
        }
        return [];

    }
    function queryAllPermissionIds(){


        var  data=executeAjaxByPost("/operator/query_roles",[]);

        if(data.retCode==1)
        {
            return data.list;
        }
        else
        {
            return [];
        }
    }

    function checkout(entry)
    {
        entry.check=!entry.check;
    }

</script>
</html>

